<template>
  <div class="calender2">
    <div class="date-header">
      <div class="show-date">{{ monthY }} {{ year }}</div>
      <div>
        <i @click="handlePrevMonth" class="el-icon-arrow-left"></i>
        <i @click="handleNextMonth" class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="date-content">
      <div class="week-header">
        <div v-for="(item, i) in week" :key="i">
          {{ item }}
        </div>
      </div>
      <div class="week-day">
        <div
          class="every-day"
          :class="[
            { 'notCurrentMonth-class': !isCurrentMonth(item.date) },
            { currentDay: isCurrentDay(item.date) },
          ]"
          v-for="(item,index) in getCountDays"
          :key="index"
        >
          {{ item.day }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "calender",
  data() {
    return {
      year: null,
      month: null,
      day: null,
      monthY: null,
      past: [],
      future: [],
      week: ["S", "M", "T", "W", "T", "F", "S"],
      monthData: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
      ],
      monthNum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    };
  },
  created() {
    this.getInitDate();
  },
  computed: {
    getCountDays() {
      let calendatArr = [];
      console.log(this.getDate(this.year, this.month, 1));
      let { year, month } = this.getNewDate(
        this.getDate(this.year, this.month, 1)
      );
      let currentFirstDay = this.getDate(year, month, 1);
      let weekDay = currentFirstDay.getDay();
      let startTime = currentFirstDay - (weekDay - 1) * 24 * 60 * 60 * 1000;
      for (let i = 0; i < 35; i++) {
        calendatArr.push({
          date: new Date(startTime + i * 24 * 60 * 60 * 1000),
          year: year,
          month: month + 1,
          day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),
        });
      }
      return calendatArr;
    },
  },
  methods: {
    handlePrevMonth() {
      let prevMonth = this.getDate(this.year, this.month, 1);
      prevMonth.setMonth(prevMonth.getMonth() - 1);
      this.year = this.getYearMonthDay(prevMonth).year;
      this.month = this.getYearMonthDay(prevMonth).month;
      this.monthNum.map((key, index) => {
        if (this.month + 1 == key) {
          this.monthY = this.monthData[index];
        }
      });
    },
    // 下一个月 获取当年月 用setMonth()去设置月份，然后更新yearMonth
    handleNextMonth() {
      let nextMonth = this.getDate(this.year, this.month, 1);
      nextMonth.setMonth(nextMonth.getMonth() + 1);
      this.year = this.getYearMonthDay(nextMonth).year;
      this.month = this.getYearMonthDay(nextMonth).month;
      this.monthNum.map((key, index) => {
        if (this.month + 1 == key) {
          this.monthY = this.monthData[index];
        }
      });
    },
    isCurrentMonth(date) {
      let { year: currentYear, month: currentMonth } = this.getYearMonthDay(
        this.getDate(this.year, this.month, 1)
      );
      let { year, month } = this.getYearMonthDay(date);
      return currentYear == year && currentMonth == month;
    },
    isCurrentDay(date) {
      let {
        year: currentYear,
        month: currentMonth,
        day: currentDay,
      } = this.getYearMonthDay(new Date());
      let { year, month, day } = this.getYearMonthDay(date);
      return currentYear == year && currentMonth == month && currentDay == day;
    },
    getDate(year, month, day) {
      return new Date(year, month, day);
    },
    getNewDate(date) {
      console.log(date);
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      return { year, month, day };
    },
    getYearMonthDay(date) {
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      return { year, month, day };
    },
    getInitDate() {
      const date = new Date();
      this.year = date.getFullYear();
      this.month = date.getUTCMonth();
      this.monthNum.map((key, index) => {
        if (this.month + 1 == key) {
          this.monthY = this.monthData[index];
        }
      });
      this.day = date.getDate();
    },
  },
};
</script>
<style lang="less" scoped>
.calender2 {
  height: 100%;
  width: 100%;
}
.date-header {
  height: 0.21rem;
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: space-between;
  i {
    color: rgba(140, 150, 171, 1);
    font-size: 0.12rem;
  }
  i:nth-child(1) {
    margin-right: 0.2rem;
  }
}
.show-date {
  font-size: 0.15rem;
  color: #6b7897;
  letter-spacing: 0.0059rem;
}
.week-header {
  font-size: 0.15rem;
  color: rgba(52, 72, 94, 0.54);
  width: 100%;
}
.week-header div {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
}
.every-day {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  font-size: 0.1454rem;
  color: #7c86a2;
  line-height: 0.4rem;
}
.notCurrentMonth-class {
  color: #e1e4e7;
}
.currentDay {
  color: #fff;
  background: #d41045;
  border-radius: 0.4rem;
}
.other-day {
  color: #ccc;
}
.now-day {
  background: rgb(35, 137, 206);
}
.active-day {
  /* padding: 2px */
  /* border-sizing:content-box; */
  border: 2px solid rgb(35, 137, 206);
}
</style>